<!-- 根据南宁白沙要求修改 首页加油价展示 -->
<template>
    <div class="white-bg px20 fitw" style="display: table">
        <p class="mt16 f16" style="color: #3559a7">今日<text-wait :value="shopName"/>最高限价</p>
        <ul class="clearfix f14 mt16">
            <li v-for="(i, index) in oilCode">
                <div class="item line28 mb16" flex="box:first cross:center">
                    <span :style="{'background-color': color[index]}" class="white"> {{i | oilName}}</span>
                    <span><text-wait :self="oilList[index]" exp="price/100">元/升</text-wait></span>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
  import urljoin from 'url-join'

  export default {
    props: {
      oilCode: {
        default: () => ['92#', '95#']
      }
    },
    data () {
      return {
        color: ['#da4746', '#7bb31b'],
        oilList: [],
        shopName: null
      }
    },
    computed: {
      companyInfo () {
        return this.$store.getters.companyInfo
      }
    },
    created () {
      this.getOil()
    },
    methods: {
      async getOil () {
        const {id, clientUrl, butted, shopName} = (await $g.shopListAsync())[0]
        this.shopName = shopName
        let list = []
        // 如果线下对接接口开启
        if (butted) {
          list = await this.getOil2(clientUrl)
        } else {
          list = await this.getOil1(id)
        }
        this.oilList = this.oilCode.map(x => list.find(i => i.oilCode.includes(x)))
      },
      // 后台设置的油枪信息
      async getOil1 (id) {
        const {obj} = await this.$get('admin/shop/getGunInfoByShopId', {shopId: id})
        return obj || []
      },

      // 线下对接油枪信息
      async getOil2 (clientUrl) {
        const {obj} = await this.$get(urljoin(clientUrl, '/oil/getOilPrice'))
        return obj ? obj.map(({Spmath:oilCode,Rpric:price}) => ({oilCode, price: price * 100})): []
      }
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    ul {
        li {
            width: 50%;
            float: left;
        }
        li:nth-child(2n) .item {
            margin-left: auto;
        }
    }

    .item {
        text-align: center;
        width: 148px;
        background-color: #f0f0f0;
        span {
            width: 72px;
        }
    }
</style>
